<template>
    <div class="pack">
      <div class="tree_container">
        <h3>监控列表</h3>
        <div class="treePack">
          <Tree :data="monitorTreeData" @on-select-change="monitorTreeChange"></Tree>
        </div>
      </div>
      <div id="divPlugin" class="plugin"></div>
    </div>
</template>
<script type="text/javascript">
  var ezjsUtil = Vue.ezjsUtil;
  var apiConstants = ezjsUtil.constants.api;
    export default {
        components: {},
        data() {
            return {
              //机构树列表数据
              monitorTreeData:[]
                }
        },
        computed: {},
        created() {

        },
        methods: {
          //登陆
          Login() {
            for(var i=0;i<this.monitorTreeData.length;i++){
              var m = this.monitorTreeData[i];
              var szIP = m.ip;
              var szPort = m.port;
              var szUsername = m.accountNum;
              var szPassword = m.password;

              WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
                success: function (xmlDoc) {
                },
                error: function () {
                }
              });
            }
            setTimeout(this.defaultShow,1000);
          },
          //默认展示
          defaultShow(){
            for(var i=1;i<10;i++){
                WebVideoCtrl.I_StartRealPlay(this.monitorTreeData[0].ip, {
                iWndIndex:i-1,
                iStreamType: parseInt("2", 10),
                iChannelID: parseInt(i, 10),
                bZeroChannel: false
              });
            }
          },
          searchAll(){
            var _this = this;
            ezjsUtil.request(apiConstants.monitor_search, {},
              function (err, data) {
                if (err) {
                  return;
                }
                _this.monitorTreeData = data;
                _this.Login();
              }
            )
          },

          monitorTreeChange(val){
            WebVideoCtrl.I_Stop();
            WebVideoCtrl.I_StartRealPlay(val[0].ip, {
              iStreamType: parseInt("2", 10),
              iChannelID: parseInt(val[0].channelId, 10),
              bZeroChannel: false
            });
          },
        },
        mounted() {
        //初始化插件
          WebVideoCtrl.I_InitPlugin('100%','100%',{
            iWndowType: 3
          });
          //将插件加入到页面中
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          this.searchAll();
        },
        destroyed(){
          //关闭预览
          for(var i=0;i<9;i++){
            WebVideoCtrl.I_Stop(i);
          }
        }
    }
</script>
<style lang="less" scoped>
    .pack {
        width: 100%;
        height: 100%;
    }

    .tree_container {
        width: 260px;
        height: 100%;
        float: left;
        border: 1px solid #d3d8e0;

    h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }
    .treePack{
        height: 94%;
        padding: 10px;
        overflow: auto;
    }
    }
    .detail_container {
        height: 100%;
        margin-left: 280px;
        overflow: hidden;
        overflow-y: auto;
    }

    h3 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #d3d8e0;
    }

    .hunttool, .hunttoolreturn {
        height: 54px;
        padding: 15px 0;

    .addbtn {
        margin-right: 6px;
        float: right;
    }

    .deltebtn {
        margin-right: 6px;
        float: right;
    }

    }
    .hunt {
        width: 14rem;
    }

    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }

    .right-card {
        margin-bottom: 20px;
    }
  .plugin{
    position: absolute;
    left: 258px;
    right: 0;
    top: 0;
    bottom: 0;
  }
</style>
